<template>
  <div>
    <el-card class="box-card" style="margin-top: 15px;width: 500px">
      <div v-for="o in 1" :key="o" class="text item">
        {{ '团队详情信息 ' }}
      </div>
    </el-card>
    <div>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-top: 15px">
        <el-form-item label="团队名称" prop="team_name">
          <el-input v-model="form.team_name"  style="width: 215px"></el-input>
        </el-form-item>
        <el-form-item label="团队类型" prop="team_type">
          <el-select v-model="form.team_type"  placeholder="请选团队类型" >
            <el-option label="AI团队" value="AI团队"></el-option>
            <el-option label="大数据处理团队" value="大数据处理团队"></el-option>
            <el-option label="数据准备团队" value="数据准备团队"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="团队负责人" prop="team_leader" label-width="93px">
          <el-input v-model="form.team_leader" style="width: 215px"></el-input>
        </el-form-item>
        <el-form-item label="团队IP地址" prop="team_ip_address" label-width="93px">
          <el-input v-model="form.team_ip_address" style="width: 215px"></el-input>
        </el-form-item>
        <el-form-item label="团队端口号" prop="team_port" label-width="93px">
          <el-input v-model="form.team_port" style="width: 215px"></el-input>
        </el-form-item>
        <el-form-item label="团队成员" prop="team_members" label-width="93px">
          <el-input v-model="form.team_members" style="width: 215px"></el-input>
        </el-form-item>
        <el-form-item label="启用标识">
          <el-switch v-model="form.is_enabled"></el-switch>
        </el-form-item>
        <el-form-item label="团队能力">
          <el-input type="textarea" v-model="form.team_capability"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit()">确认修改</el-button>
          <el-button @click="back()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>



  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      form: {
        team_id:'',
        team_name: '',
        team_type: '',
        team_leader: '',
        team_ip_address: '',
        is_enabled: false,
        team_port: '',
        team_members: '',
        team_capability: ''
      },

      params: {
        team_id:'',
      },
      tableData: [],
      rules: {
        team_leader: [
          { required: true, message: '请输入负责人名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        team_name: [
          { required: true, message: '请输入团队名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        team_port: [
          { required: true, message: '请输入团队端口号', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        team_type: [
          { required: true, message: '请选择团队类型', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        team_ip_address: [
          { required: true, message: '请选择团队类型', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        team_members: [
          { required: true, message: '请选择团队类型', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
      }
    };
  },
  created(){
    var team_id = this.$route.query.team_id
    request.get("http://localhost:9100/data_factory/team_details/finddetail/" + team_id).then(res =>{
      if (res.code === '0'){
        this.form = res.data[0];
      }else {

      }
    })
  },
  methods: {
    back(){
      this.$router.go(-1);
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 如果表单验证通过，则发送更新请求
          request.post("http://localhost:9100/data_factory/team_details/update", {
            team_id: this.form.team_id,
            team_name: this.form.team_name,
            team_type: this.form.team_type,
            team_leader: this.form.team_leader,
            team_ip_address: this.form.team_ip_address,
            is_enabled: this.form.is_enabled,
            team_port: this.form.team_port,
            team_members: this.form.team_members,
            team_capability: this.form.team_capability
          }).then(res => {
            if (res.code === '0') {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
            } else {
              this.$message({
                message: res.msg || '修改失败', // 使用res.msg，如果它为空则显示默认错误消息
                type: 'error'
              });
            }
          });
        } else {
          // 如果表单验证不通过，则显示错误信息，并且不发送请求
          this.$message({
            message: '表单验证失败，请检查您的修改是否正确', // 自定义错误消息
            type: 'error'
          });
          return false; // 阻止表单提交
        }
      });
    },
  },
}
</script>